import React, { Component } from "react";
// import { createPortal } from "react-dom";
import withPortal from "./withPortal";
import "./modal.css";

// props的类型检查
import { bool, string, func } from "prop-types";

class Modal extends Component {
  static propTypes = {
    visible: bool.isRequired,
    title: string,
    onOk: func,
    onCancel: func,
  };

  // props默认值
  static defaultProps = {
    title: "对话框标题",
  };

  render() {
    // console.log(this.props);
    return (
      <>
        {this.props.visible && (
          <div className="shadow">
            <div className="center">
              <h3>{this.props.title}</h3>
              {this.props.children}
              <button onClick={this.props.onCancel}>取消</button>
              <button onClick={this.props.onOk}>确定</button>
            </div>
          </div>
        )}
      </>
    );
  }
}

export default withPortal(Modal);
